<template>
	<div>
		<el-card class="user " shadow="hover">
			<ProfileUser/>
		</el-card>
		<el-card class="user" style="margin-top: 16px" shadow="hover">
			<div>
				<el-tabs v-model="activeName" class="profile-tabs" style="height: 400px" tab-position="top">
					<el-tab-pane :label="t('profile.info.basicInfo')" name="basicInfo">
						<div style="height: 20px"></div>
						<BasicInfo/>
					</el-tab-pane>
					<el-tab-pane :label="t('profile.info.resetPwd')" name="resetPwd">
						<div style="height: 20px"></div>
						<ResetPwd/>
					</el-tab-pane>
				</el-tabs>
			</div>
		</el-card>
	</div>
</template>
<script lang="ts" setup>
import {BasicInfo, ProfileUser, ResetPwd, UserSocial} from './components'

const {t} = useI18n()
defineOptions({name: 'Profile'})
const activeName = ref('basicInfo')
</script>
<style scoped>
:deep(.el-tabs__item) {
  font-weight: 400 !important;
  font-size: 18px !important;
  color: #9B9B9B;
}

:deep(.el-tabs__active-bar) {
  background: var(--special-color) !important;
}

:deep(.el-tabs__item.is-active) {
  color: var(--special-color) !important;
}

:deep(.el-tabs__item:hover):hover {
  color: var(--special-color) !important;
}

.user {
  max-height: 960px;
  padding: 15px 20px 20px;
}

.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-card .el-card__header, .el-card .el-card__body) {
  padding: 15px !important;
}

.profile-tabs > .el-tabs__content {
  padding: 32px;
  font-weight: 600;
  color: #6b778c;
}

.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>
